<template>
	<view class="w-full h-full discounts-container flex-column">
		<view class="form-title">优惠套餐</view>
		<view class="flex-1 mt-20">
			<view v-for="(item,index) in discountsData" :key="index" class="mt-20 rule-item" @click="handleClick(item)">
				<view class="ruleName mb-20">{{item.ruleName}}</view>
				<view v-for="(i,v) in item.ruleContent.data" :key="v">
					<view v-if="item.ruleType === 1" class="item">
						同时包月{{i.amount}}个{{v>0 ? '及以上': ''}}车场,享受每月{{i.rate}}折优惠
					</view>
					<view v-if="item.ruleType === 2" class="item">
						<view>同时包月{{item.ruleContent.amount}}个{{v>0 ? '及以上': ''}}车场,享受满{{i.total}}元,减{{i.reduce}}元</view>
					</view>
					<view v-if="item.ruleType === 3" class="item">
						<view>同时包月{{i.amount}}个{{v>0 ? '及以上': ''}}车场,减{{i.reduce}}元/月</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			discountsData: {
				type: Array,
				default: () => []
			}
		},
		data () {
			return {
				
			}
		},
		methods: {
			handleClick (item = {}) {
				this.$emit('chooseDiscounts', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discounts-container{
		padding: 25rpx 30rpx 35rpx 30rpx;
		background: #F5F5F5;
	}
	.form-title{
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50.4rpx;
		text-align: left;
		color: #222222;
	}
	.ruleName{
		font-family: PingFang SC;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 30rpx;
		color: #222222;
		position: relative;
	}
	.ruleName::before{
		content: "";
		width: 10rpx;
		height: 30rpx;
		background: #3A67D5;
		position: absolute;
		left: -27rpx;
	}
	.rule-item{
		min-height: 90rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		.item{
			height: 43rpx;
			line-height: 43rpx;
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			color: #919EB5;
		}
	}
</style>